[V0_FILE]typescriptreact:file="app/loading.tsx" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" export default { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 20 10% 8%; --foreground: 30 10% 98%; --card: 20 10% 12%; --card-foreground: 30 10% 98%; --popover: 20 10% 12%; --popover-foreground: 30 10% 98%; --primary: 24 12% 53%; --primary-foreground: 30 10% 98%; --secondary: 20 10% 15%; --secondary-foreground: 30 10% 98%; --muted: 20 10% 15%; --muted-foreground: 24 5% 75%; --accent: 24 12% 53%; --accent-foreground: 30 10% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 24 12% 53%; --input: 24 12% 53%; --ring: 24 12% 53%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add styles for the modal overlay */ [data-state="open"][data-overlay-container="true"] { @apply bg-[#1A0C06]/80 backdrop-blur-[2px]; } [V0_FILE]typescriptreact:file="types/index.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" export interface Category { name: string icon: React.ComponentType> } export interface MenuItem { id: string name: string price: number image?: string category: string description: string isNew?: boolean isFeatured?: boolean isRecommended?: boolean isBestSeller?: boolean pairings?: string[] nutrition: { calories: number protein: number carbs: number fat: number } stock: number } export interface CartItem extends MenuItem { quantity: number notes?: string } export interface CartContentProps { cartItems: CartItem[] updateQuantity: (id: string, quantity: number) => void updateNotes: (id: string, notes: string) => void removeFromCart: (id: string) => void couponCode: string setCouponCode: (code: string) => void subtotal: number discount: number tax: number total: number } [V0_FILE]typescriptreact:file="components/menu/menu-card.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { useState } from "react" import type { MenuItem } from "@/types" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Sparkles, TrendingUp, Coffee, Star } from "lucide-react" import { motion } from "framer-motion" interface MenuCardProps { item: MenuItem onAddToCart: (item: MenuItem) => void onShowNutrition: (item: MenuItem) => void } export function MenuCard({ item, onAddToCart, onShowNutrition }: MenuCardProps) { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{item.image ? (

) : (

)}

{/* Status Badges */}

{item.isNew && ( New )} {item.isRecommended && ( Recommended )} {item.isBestSeller && ( Best Seller )}

{item.stock <= 5 && ( Low Stock )} {/* Rating */} {isHovered && ( {(4 + Math.random()).toFixed(1)} )}

{item.name}

${item.price.toFixed(2)}

{item.stock} left in stock

{/* Pairings */} {item.pairings && item.pairings.length > 0 && (

Pairs well with:

{item.pairings.map((pairing) => ( {pairing} ))}

)}

Calories: {item.nutrition.calories}

) } [V0_FILE]typescriptreact:file="components/layout/sidebar.tsx" isEdit="true" isMerged="true" "use client" import type { Category } from "@/types" import { cn } from "@/lib/utils" interface SidebarProps { categories: Category[] selectedCategory: string onSelectCategory: (category: string) => void } export function Sidebar({ categories, selectedCategory, onSelectCategory }: SidebarProps) { return (

Categories

{categories.map((category) => ( ))}

) } [V0_FILE]typescriptreact:file="components/menu/nutrition-modal.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { ExternalLink } from "lucide-react" import Image from "next/image" import type { MenuItem } from "@/types" import { useState } from "react" interface NutritionModalProps { item: MenuItem | null isOpen: boolean onClose: () => void } export function NutritionModal({ item, isOpen, onClose }: NutritionModalProps) { const [showingExtendedInfo, setShowingExtendedInfo] = useState(false) if (!item) return null // Calculate percentages based on daily values const proteinPercent = Math.round((item.nutrition.protein / 50) * 100) const carbsPercent = Math.round((item.nutrition.carbs / 300) * 100) const fatPercent = Math.round((item.nutrition.fat / 65) * 100) const caloriesPercent = Math.round((item.nutrition.calories / 2000) * 100) return ( ) } [V0_FILE]typescriptreact:file="components/cart/cart-content.tsx" isEdit="true" isMerged="true" "use client" import type { CartContentProps } from "@/types" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { CartItemComponent } from "./cart-item" import { ShoppingBag, Tag } from "lucide-react" export function CartContent({ cartItems, updateQuantity, updateNotes, removeFromCart, couponCode, setCouponCode, subtotal, discount, tax, total, }: CartContentProps) { return (

{cartItems.length === 0 ? (

Your cart is empty

Add items to get started

) : (

{cartItems.map((item) => ( ))}

)}

setCouponCode(e.target.value)} className="border-white/10 bg-white/5 text-white placeholder:text-white/50" />

Subtotal ${subtotal.toFixed(2)}

{discount > 0 && (

Discount (10%) -${discount.toFixed(2)}

)}

Tax (8%) ${tax.toFixed(2)}

Total ${total.toFixed(2)}

) } [V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "framer-motion": "^10.16.4", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="data/menu.ts" isEdit="true" isMerged="true" import { CoffeeIcon, Grid, Croissant, Coffee, CakeSlice, Cookie, Sandwich } from "lucide-react" import type { Category, MenuItem } from "@/types" export const categories: Category[] = [ { name: "All", icon: Grid }, { name: "Hot Coffee", icon: CoffeeIcon }, { name: "Cold Coffee", icon: Coffee }, { name: "Tea", icon: CoffeeIcon }, { name: "Breakfast", icon: Croissant }, { name: "Lunch", icon: Sandwich }, { name: "Bakery", icon: Cookie }, { name: "Donuts", icon: Cookie }, { name: "Cakes", icon: CakeSlice }, ] export const menuItems: MenuItem[] = [ // Specified sequence first // 1. Gingerbread Man Cookie { id: "41", name: "Gingerbread Man Cookie", price: 3.75, category: "Bakery", description: "Classic gingerbread man cookie with white icing and red bow tie", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/gingerbread-cookie-x4ZmS3MnFqSmXeSCbYij9J18uhHFNa.png", isNew: true, isRecommended: true, pairings: ["Hot Chocolate", "Chai Latte"], nutrition: { calories: 230, protein: 2, carbs: 35, fat: 8 }, stock: 18, }, // 2. Heart Sugar Cookie { id: "39", name: "Heart Sugar Cookie", price: 3.5, category: "Bakery", description: "Heart-shaped sugar cookie with red and white icing and decorative hearts", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/heart-cookie-MwjPRYDr00GWW98LhpT14HgKyx5J4E.png", isNew: true, isRecommended: true, pairings: ["Hot Tea", "Cappuccino"], nutrition: { calories: 210, protein: 2, carbs: 32, fat: 9 }, stock: 15, }, // 3. Tiramisu Cake Slice { id: "34", name: "Tiramisu Cake Slice", price: 5.95, category: "Cakes", description: "Elegant layered tiramisu cake slice with cream and caramel topping", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/slcie2-Zq98J6m1FV9DsysFGULzXkIgTgY9kO.png", isNew: true, isRecommended: true, pairings: ["Espresso", "Cappuccino"], nutrition: { calories: 360, protein: 5, carbs: 40, fat: 16 }, stock: 8, }, // 4. Holiday Hot Chocolate { id: "22", name: "Holiday Hot Chocolate", price: 4.95, category: "Hot Coffee", description: "Festive hot chocolate in a Christmas tree mug with whipped cream", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/christmas-special-m7M11J2S4Ot8BOxeIvEqQdQ3CBi5dN.png", isNew: true, isRecommended: true, pairings: ["Gingerbread Cookie", "Peppermint Stick"], nutrition: { calories: 320, protein: 5, carbs: 42, fat: 14 }, stock: 20, }, // 5. Affogato Special { id: "21", name: "Affogato Special", price: 5.95, category: "Cold Coffee", description: "Espresso poured over cream in an elegant glass cup", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cup-TBCMW7IXf03oXBh5K3NcrPAZ1E46s7.png", isBestSeller: true, pairings: ["Biscotti", "Chocolate Truffle"], nutrition: { calories: 180, protein: 3, carbs: 22, fat: 9 }, stock: 10, }, // 6. Chocolate Mousse Slice { id: "33", name: "Chocolate Mousse Slice", price: 5.75, category: "Cakes", description: "Decadent chocolate cake slice with a creamy mousse topping", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/choco-slice-Tula4bqn2SDLEVnQ7rDpKICbG7mJv6.png", isBestSeller: true, pairings: ["Espresso", "Coffee"], nutrition: { calories: 380, protein: 6, carbs: 42, fat: 18 }, stock: 10, }, // 7. Lemon Cake { id: "36", name: "Lemon Cake", price: 4.95, category: "Cakes", description: "Smooth lemon cake with a cherry on top", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cakeeea-YaDyHWDxXVN6geJLhMg2ENZChgwdhr.png", isRecommended: true, pairings: ["Earl Grey Tea", "Iced Tea"], nutrition: { calories: 290, protein: 4, carbs: 42, fat: 12 }, stock: 10, }, // 8. Then remaining products (without duplicates) // Hot Coffee { id: "1", name: "Signature Latte", price: 4.5, category: "Hot Coffee", description: "Our house special with perfectly steamed milk", isRecommended: true, isBestSeller: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coffee_Latte_Art-weZ79Wo6UCfIe3yIRXSLB7uR0oqXR6.png", pairings: ["Chocolate Croissant", "Almond Biscotti"], nutrition: { calories: 120, protein: 6, carbs: 15, fat: 4 }, stock: 10, }, { id: "3", name: "Pour Over", price: 3.5, category: "Hot Coffee", description: "Hand-crafted single origin coffee", isRecommended: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coffee_Pot-9dJqtBPYEkyYEowc00xbcTM3AgRxER.png", pairings: ["Butter Croissant", "Dark Chocolate"], nutrition: { calories: 5, protein: 0, carbs: 0, fat: 0 }, stock: 15, }, { id: "24", name: "Mocha Deluxe", price: 5.5, category: "Hot Coffee", description: "Rich mocha topped with whipped cream and chocolate shavings", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coffeeee-MuQcWlug7KTVzdk2QgHgiDbNEp8JtL.png", isRecommended: true, pairings: ["Chocolate Croissant", "Brownie"], nutrition: { calories: 280, protein: 6, carbs: 35, fat: 12 }, stock: 15, }, // Breakfast { id: "12", name: "Breakfast Combo", price: 7.5, category: "Breakfast", description: "Fresh coffee with toasted bread - perfect morning starter", isRecommended: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coffee_and_bread-GGakKaUeXfHnJO3Mw04IgBKA9NnI0Y.png", pairings: ["Add Jam", "Add Avocado"], nutrition: { calories: 340, protein: 8, carbs: 45, fat: 12 }, stock: 15, }, { id: "18", name: "Coffee & Donut Combo", price: 5.5, category: "Breakfast", description: "Freshly brewed coffee with a chocolate frosted donut", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/coffee-and-donut-MdepNVfhpIkmunwDyGzRIo8IPAsiJy.png", isRecommended: true, pairings: ["Iced Coffee"], nutrition: { calories: 320, protein: 5, carbs: 45, fat: 14 }, stock: 20, }, { id: "20", name: "Cookie & Coffee Combo", price: 5.25, category: "Breakfast", description: "Creamy coffee with floating coffee beans and a chocolate chip cookie", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cookee-coffe-kXs2aRSwnMbeLeM1yd0IBPq2BWPXkS.png", isRecommended: true, pairings: ["Extra Cookie", "Add Cinnamon"], nutrition: { calories: 290, protein: 4, carbs: 38, fat: 12 }, stock: 15, }, { id: "25", name: "Blueberry Pancakes", price: 6.95, category: "Breakfast", description: "Fluffy pancakes topped with maple syrup and fresh blueberries", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pancakee-rAR2G37UxjbLEYGClkWgayd7pMs2EO.png", isRecommended: true, pairings: ["Fresh Orange Juice", "Cappuccino"], nutrition: { calories: 420, protein: 7, carbs: 68, fat: 14 }, stock: 12, }, { id: "28", name: "Honey Pancake Stack", price: 6.5, category: "Breakfast", description: "Stack of fluffy pancakes with honey drizzle and sweet toppings", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cakee-dGCECMCCYNH8OmNPHFuqWzD0lEC4ZH.png", isBestSeller: true, pairings: ["Latte", "Fresh Fruit"], nutrition: { calories: 450, protein: 8, carbs: 70, fat: 15 }, stock: 10, }, // Lunch { id: "40", name: "Gourmet Burger", price: 8.95, category: "Lunch", description: "Colorful burger with fresh vegetables and our special sauce", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/burger-eWvHDraEaTLSHaZ8N7YYMXOMOLw3RO.png", isNew: true, isBestSeller: true, pairings: ["Iced Tea", "French Fries"], nutrition: { calories: 580, protein: 25, carbs: 48, fat: 32 }, stock: 15, }, // Bakery { id: "8", name: "Butter Croissant", price: 3.5, category: "Bakery", description: "Flaky, buttery French croissant", isBestSeller: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/criossant-GVLYfkYGVeWIM7BqVEL7RvxyvKHrk0.png", pairings: ["Cappuccino", "Americano"], nutrition: { calories: 280, protein: 6, carbs: 32, fat: 14 }, stock: 18, }, { id: "10", name: "Coffee Cupcake", price: 4.25, category: "Bakery", description: "Chocolate cupcake with coffee frosting and cherry on top", isNew: true, isRecommended: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coffee_cupcake-rC0btgLkY79pbGTFzdevzy2QzUIqgi.png", pairings: ["Americano", "Cappuccino"], nutrition: { calories: 310, protein: 4, carbs: 42, fat: 15 }, stock: 12, }, { id: "27", name: "Cherry Jello Dessert", price: 4.25, category: "Bakery", description: "Refreshing cherry jello dessert with a decorative cherry on top", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/jelly-CJ2Z3KRK7XzhosFrkf6o5MXpfjbqNw.png", isNew: true, pairings: ["Iced Tea", "Sparkling Water"], nutrition: { calories: 180, protein: 2, carbs: 42, fat: 0 }, stock: 15, }, { id: "35", name: "Chocolate Chip Cookie", price: 2.95, category: "Bakery", description: "Classic chocolate chip cookie with rich chocolate chunks", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cooke2-vaoh9lgWw3FvLdysCGalzJmcPPTMq5.png", isNew: true, pairings: ["Hot Chocolate", "Milk"], nutrition: { calories: 220, protein: 3, carbs: 28, fat: 11 }, stock: 24, }, { id: "38", name: "Chocolate Chip Cookie Deluxe", price: 3.25, category: "Bakery", description: "Premium chocolate chip cookie with extra chocolate chunks", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cookie2-tiTYygQ94Hl4AxZdkEldTMcKOtvrQl.png", isBestSeller: true, pairings: ["Milk", "Coffee"], nutrition: { calories: 240, protein: 3, carbs: 30, fat: 12 }, stock: 20, }, { id: "43", name: "Percentage Cookie", price: 3.25, category: "Bakery", description: "Unique percentage sign shaped cookie with bright yellow icing", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/12121-yr4bse9vOxX2zKbPzW4q53BMosLbXi.png", isNew: true, pairings: ["Coffee", "Milk"], nutrition: { calories: 215, protein: 2, carbs: 30, fat: 10 }, stock: 12, }, // Donuts { id: "17", name: "Pink Frosted Donut", price: 2.75, category: "Donuts", description: "Soft donut with pink frosting and colorful sprinkles", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/donut-lc7CQNTmZxkOf1Q4qcLE6egzRzHjGf.png", isBestSeller: true, pairings: ["Cold Brew", "Hot Chocolate"], nutrition: { calories: 240, protein: 3, carbs: 32, fat: 12 }, stock: 15, }, { id: "42", name: "Chocolate Glazed Donut", price: 3.25, category: "Donuts", description: "Classic chocolate glazed donut with white icing drizzle", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/donuut-6c11fW93bGYO8zuBojs06VTjd77XY1.png", isNew: true, isBestSeller: true, pairings: ["Coffee", "Milk"], nutrition: { calories: 280, protein: 3, carbs: 36, fat: 14 }, stock: 20, }, // Cakes { id: "11", name: "Coffee Layer Cake", price: 5.75, category: "Cakes", description: "Rich coffee cake with cherry garnish and caramel drizzle", isBestSeller: true, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Coffee_Cake-Wv2gdedIAIygqLDjiCYMtuRhpPsjhy.png", pairings: ["Latte", "Flat White"], nutrition: { calories: 380, protein: 5, carbs: 48, fat: 18 }, stock: 8, }, { id: "15", name: "Strawberry Pie", price: 4.5, category: "Cakes", description: "Delicious strawberry pie with a flaky crust", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/strawberry-pie-nKyV9DvE2tmTGTCVvOjugDbecwHlZS.png", isNew: true, pairings: ["Cappuccino", "Earl Grey Tea"], nutrition: { calories: 280, protein: 3, carbs: 36, fat: 14 }, stock: 10, }, { id: "16", name: "Pumpkin Pie", price: 4.25, category: "Cakes", description: "Classic pumpkin pie with whipped cream", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/pie-nkW8F0Nbj65TZxkCtCGz4NrpJkNxO3.png", isRecommended: true, pairings: ["Latte", "Chai Tea"], nutrition: { calories: 300, protein: 4, carbs: 40, fat: 15 }, stock: 8, }, { id: "26", name: "Berry Layer Cake", price: 5.95, category: "Cakes", description: "Colorful layered cake with chocolate topping and fresh strawberries", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cakeeee-iMPRVyQUeu4Vt860X2gYTWlC97w7Av.png", isNew: true, isBestSeller: true, pairings: ["Earl Grey Tea", "Cappuccino"], nutrition: { calories: 380, protein: 5, carbs: 52, fat: 16 }, stock: 8, }, { id: "29", name: "Pink Cake Slice", price: 4.75, category: "Cakes", description: "Slice of pink-frosted cake with colorful candy decorations", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cake-slice-yYPgpQnIiePqXyTtI6eXCjwycAU45y.png", isRecommended: true, pairings: ["Hot Chocolate", "Cappuccino"], nutrition: { calories: 320, protein: 4, carbs: 48, fat: 14 }, stock: 12, }, { id: "30", name: "Lemon Cake Slice", price: 4.95, category: "Cakes", description: "Bright yellow lemon cake slice with a fresh strawberry on top", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yello-cake-slice-oPYtVj9FU5XtcZDZLK3UI643cWmqHP.png", isNew: true, pairings: ["Earl Grey Tea", "Iced Tea"], nutrition: { calories: 310, protein: 4, carbs: 45, fat: 13 }, stock: 10, }, { id: "31", name: "Caramel Cake Slice", price: 5.25, category: "Cakes", description: "Rich caramel cake slice with a chocolate drizzle and strawberry", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cakee-slice-ykvDotqJAHGnedDUegRokjBWHM4aCC.png", isBestSeller: true, pairings: ["Cappuccino", "Latte"], nutrition: { calories: 340, protein: 5, carbs: 48, fat: 15 }, stock: 8, }, { id: "32", name: "Strawberry Cake Slice", price: 5.5, category: "Cakes", description: "Delicate strawberry cake slice with a fresh strawberry topping", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cale-clde2-XipyP2RQzbvDYRkm02WF4xQfb9LElC.png", isRecommended: true, pairings: ["Hot Tea", "Iced Coffee"], nutrition: { calories: 320, protein: 4, carbs: 46, fat: 14 }, stock: 12, }, { id: "37", name: "Layer Cake with Slice", price: 5.5, category: "Cakes", description: "Elegant layered cake with a slice removed, showing the creamy interior", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cake2-6j7HmkXz5sHLpG2xsS8N2M1qaZo9g6.png", isNew: true, isBestSeller: true, pairings: ["Coffee", "Cappuccino"], nutrition: { calories: 340, protein: 5, carbs: 45, fat: 15 }, stock: 8, }, ] [V0_FILE]typescriptreact:file="components/cart/cart-item.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Image from "next/image" import type { CartItem } from "@/types" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Trash2 } from "lucide-react" interface CartItemProps { item: CartItem updateQuantity: (id: string, quantity: number) => void updateNotes: (id: string, notes: string) => void removeFromCart: (id: string) => void } export function CartItemComponent({ item, updateQuantity, updateNotes, removeFromCart }: CartItemProps) { return (

{/* Product Image */}

{item.image ? ( {item.name}

) : (

{item.name[0]}

)}

{/* Item Details */}

{item.name}

${item.price.toFixed(2)}

{/* Quantity Controls */}

{item.quantity} ${(item.price * item.quantity).toFixed(2)}

{/* Notes Input */} updateNotes(item.id, e.target.value)} className="h-8 border-white/10 bg-white/5 text-sm text-white placeholder:text-white/50" />

) } [V0_FILE]typescriptreact:file="components/thank-you-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Instagram, ShoppingBag } from "lucide-react" export function ThankYouModal() { const [isOpen, setIsOpen] = useState(false) useEffect(() => { // Check if modal has been shown before in this session const hasShown = sessionStorage.getItem("thankYouModalShown") if (!hasShown) { const timer = setTimeout(() => { setIsOpen(true) // Mark as shown for this session sessionStorage.setItem("thankYouModalShown", "true") }, 7000) // 7 seconds return () => clearTimeout(timer) } }, []) return ( ) } [V0_FILE]typescriptreact:file="components/layout/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Coffee, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { CartContent } from "../cart/cart-content" import type { CartContentProps, MenuItem } from "@/types" import SearchDropdown from "./search-dropdown" interface HeaderProps extends CartContentProps { searchQuery: string onSearchChange: (query: string) => void onAddToCart?: (item: MenuItem) => void } export function Header({ cartItems, onAddToCart, ...cartProps }: HeaderProps) { return (

{/* Company Logo and Name */}

Flowers&Saints Cafe

{/* Search Dropdown Component */} {})} />

Cart Review your items and checkout

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useMemo, useEffect } from "react" import { categories, menuItems } from "@/data/menu" import type { CartItem, MenuItem } from "@/types" import { Sidebar } from "@/components/layout/sidebar" import { Header } from "@/components/layout/header" import { MenuGrid } from "@/components/menu/menu-grid" import { CartContent } from "@/components/cart/cart-content" import { ThankYouModal } from "@/components/thank-you-modal" export default function CafePOS() { const [selectedCategory, setSelectedCategory] = useState(categories[0].name) const [searchQuery, setSearchQuery] = useState("") const [cartItems, setCartItems] = useState([]) const [couponCode, setCouponCode] = useState("") const [showNutrition, setShowNutrition] = useState(null) const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("") // Debounce search query to prevent excessive filtering useEffect(() => { const timer = setTimeout(() => { setDebouncedSearchQuery(searchQuery) }, 300) return () => clearTimeout(timer) }, [searchQuery]) const filteredItems = useMemo(() => { if (!debouncedSearchQuery) { return menuItems } return menuItems.filter((item) => { const searchMatch = item.name.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) || item.description.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) || item.category.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) return searchMatch }) }, [debouncedSearchQuery]) const addToCart = (item: MenuItem) => { setCartItems((prev) => { const existing = prev.find((i) => i.id === item.id) if (existing) { return prev.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)) } return [...prev, { ...item, quantity: 1 }] }) } const updateQuantity = (id: string, quantity: number) => { setCartItems((prev) => prev.map((item) => (item.id === id ? { ...item, quantity: Math.max(1, quantity) } : item))) } const updateNotes = (id: string, notes: string) => { setCartItems((prev) => prev.map((item) => (item.id === id ? { ...item, notes } : item))) } const removeFromCart = (id: string) => { setCartItems((prev) => prev.filter((item) => item.id !== id)) } const subtotal = useMemo(() => cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0), [cartItems]) const discount = couponCode === "DISCOUNT10" ? subtotal * 0.1 : 0 const tax = (subtotal - discount) * 0.08 const total = subtotal - discount + tax return (

{/* Darker background gradient */}

{/* Subtle noise texture */}

{/* Content */}

{/* Thank You Modal */}

) } [V0_FILE]typescriptreact:file="components/layout/search-dropdown.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Search, Sparkles, TrendingUp, History, Clock, Tag, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { AnimatePresence, motion } from "framer-motion" import Image from "next/image" import { menuItems } from "@/data/menu" import type { MenuItem } from "@/types" interface SearchDropdownProps { onAddToCart: (item: MenuItem) => void } export default function SearchDropdown({ onAddToCart }: SearchDropdownProps) { const [searchQuery, setSearchQuery] = useState("") const [isFocused, setIsFocused] = useState(false) const [showDropdown, setShowDropdown] = useState(false) const [searchHistory, setSearchHistory] = useState([]) const [filteredItems, setFilteredItems] = useState([]) const [activeCategory, setActiveCategory] = useState(null) const inputRef = useRef(null) const containerRef = useRef(null) // Get recommended items (best sellers and new items) const recommendedItems = menuItems.filter((item) => item.isBestSeller || item.isRecommended).slice(0, 4) // Get trending items (best sellers) const trendingItems = menuItems.filter((item) => item.isBestSeller).slice(0, 3) // Get categories with item counts const categories = [...new Set(menuItems.map((item) => item.category))] .map((category) => ({ name: category, count: menuItems.filter((item) => item.category === category).length, })) .sort((a, b) => b.count - a.count) .slice(0, 5) // Filter items based on search query useEffect(() => { if (searchQuery.trim()) { const filtered = menuItems.filter((item) => { const query = searchQuery.toLowerCase() return ( item.name.toLowerCase().includes(query) || item.description.toLowerCase().includes(query) || item.category.toLowerCase().includes(query) ) }) setFilteredItems(filtered) } else { setFilteredItems([]) } }, [searchQuery]) // Load search history from localStorage on component mount useEffect(() => { const savedHistory = localStorage.getItem("searchHistory") if (savedHistory) { try { setSearchHistory(JSON.parse(savedHistory)) } catch (e) { console.error("Failed to parse search history") } } }, []) // Handle click outside to close dropdown useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { setShowDropdown(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Handle search input focus const handleFocus = () => { setIsFocused(true) setShowDropdown(true) } // Handle search input click const handleSearchClick = () => { setShowDropdown(true) } // Clear search and reset state const handleClearSearch = () => { setSearchQuery("") setActiveCategory(null) inputRef.current?.focus() // Keep focus on input after clearing } // Handle search submission const handleSearchSubmit = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { // Add to search history if not already present if (!searchHistory.includes(searchQuery)) { const newHistory = [searchQuery, ...searchHistory].slice(0, 5) setSearchHistory(newHistory) // Save to localStorage localStorage.setItem("searchHistory", JSON.stringify(newHistory)) } } } // Select a recommendation const selectRecommendation = (item: MenuItem) => { setSearchQuery(item.name) // Keep the dropdown open with filtered results setShowDropdown(true) inputRef.current?.focus() } // Filter by category const filterByCategory = (category: string) => { setActiveCategory(category) const filtered = menuItems.filter((item) => item.category === category) setFilteredItems(filtered) inputRef.current?.focus() } // Add item to cart directly from search const addItemToCart = (item: MenuItem, e: React.MouseEvent) => { e.stopPropagation() onAddToCart(item) // Show a brief confirmation const button = e.currentTarget as HTMLButtonElement const originalText = button.textContent button.textContent = "Added!" button.disabled = true setTimeout(() => { button.textContent = originalText button.disabled = false }, 1000) } // Select a search history item const selectHistoryItem = (query: string) => { setSearchQuery(query) inputRef.current?.focus() } // Clear search history const clearSearchHistory = (e: React.MouseEvent) => { e.stopPropagation() setSearchHistory([]) localStorage.removeItem("searchHistory") } return (

{/* Search Recommendations Dropdown - Using absolute positioning */} {showDropdown && (

{/* Categories Quick Filter */} {!searchQuery && (

Browse Categories

{/* Left Arrow */} {/* Right Arrow */}

{nonEmptyCategories .map((category, index) => { // Find a product image for this category const categoryProduct = items.find((item) => item.category === category.name && item.image) const imageUrl = categoryProduct?.image || "/placeholder.svg" // Calculate visible indices based on current index and total categories const totalCategories = nonEmptyCategories.length const visibleIndices = [] // Calculate which indices should be visible in the carousel for (let i = 0; i < totalCategories; i++) { const indexToCheck = (currentCategoryIndex + i) % totalCategories visibleIndices.push(indexToCheck) if (visibleIndices.length >= 6) break // Maximum 6 visible items } // Check if this category should be visible const isVisible = visibleIndices.includes(index) if (!isVisible) return null // Calculate the order for this item const orderIndex = visibleIndices.indexOf(index) return ( onSelectCategory(category.name)} style={{ order: orderIndex }} layout >

{category.name}

{items.filter((item) => item.category === category.name).length} items

) }) .filter(Boolean)}

)}

{/* Recommended Items */} {recommendedItems.length > 0 && (

Best Sellers

{bestSellerItems.map((item, index) => ( ))}

)} {/* Regular Items */} {regularItems.length > 0 && (

All Items

{regularItems.map((item, index) => ( ))}

)}

setSelectedItem(null)} /> ) } else { // For specific categories or search results, just show all items without special sections return ( <>

{searchQuery && (

Search results for "{searchQuery}"

{filteredItems.length} {filteredItems.length === 1 ? "item" : "items"} )} {filteredItems.length === 0 ? (

No items found

Try a different search term

) : (

{filteredItems.map((item, index) => ( ))}

)}

setSelectedItem(null)} /> ) } } ;

{item.name}

Categories

{item.name}

Extended Nutritional Information

Vitamins

Minerals

Allergen Information

{item.name}

Flowers&Saints Cafe

Browse Categories

{category.name}

Recommended

Best Sellers

All Items

Search results for "{searchQuery}"

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This